<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="zxh">
    <title>下拉菜单</title>
    <style>
        .clear {
            clear: both;
        }      
        #outer {
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        #outer li {
            float: left;
            list-style: none;
        }
        
        #outer li .ornage{
            display: block;
            background: gray;
            padding: 10px 12px;
            text-decoration: none;
            width: 100px;
            color: #EAFFED;
            white-space: nowrap;
        }
        #outer .ornage:hover{
            color: orange;
            text-decoration: underline;
        }           
        #outer li ul {
            margin: 5px;
            padding: 5px;
            position: absolute;
            display: none;
            border: 1px solid #999;
        } 
        #outer li ul li {
            float: none;
        }    
    </style>
</head>

<body>
    <ul id="outer">
        <li><a href="#" class="ornage">公司简介</a>
            <ul class="menu">
                <li><a href="#">subsub1</a></li>
                <li><a href="#">subsub2</a></li>
                <li><a href="#">subsub3</a></li>
            </ul>
        </li>
        <li><a href="#"  class="ornage">产品介绍</a>
            <ul class="menu">
                <li><a href="#">subsub1</a></li>
                <li><a href="#">subsub2</a></li>
                <li><a href="#">subsub3</a></li>
            </ul>
        </li>
        <li><a href="#"  class="ornage">联系我们</a>
            <ul class="menu">
                <li><a href="#">subsub1</a></li>
                <li><a href="#">subsub2</a></li>
                <li><a href="#">subsub3</a></li>
            </ul>
        </li>
        <li><a href="#"  class="ornage">人才招聘</a>
            <ul class="menu">
                <li><a href="#">subsub1</a></li>
                <li><a href="#">subsub2</a></li>
                <li><a href="#">subsub3</a></li>
            </ul>
        </li>
    </ul>
    <div class="clear"></div>

</body>

</html>
<script src="js/jquery.js"></script>
<script>
    $('#outer li').hover(function () {
        $(this).find('.menu').show()
    }, function () {
        $(this).find('.menu').hide()
    })

</script>